<template>
    <div class="rootBox">
        <Echarts class="echarts" :options="options" />
        <div class="decorate"></div>
    </div>
</template>

<script>
import Echarts from "../../../../../component/ECharts";
export default {
    components: {
        Echarts,
    },
    computed: {
        options() {
            return {
                // title: {
                //     text: "某站点用户访问来源",
                //     subtext: "纯属虚构",
                //     left: "center",
                // },

                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c}座 ",
                },
                legend: {
                    orient: "vertical",
                    right: 20,
                    top: "center",
                    bottom: 20,
                    data: ["重大", "较大", "一般", "低"],
                    itemHeight: 5,
                    textStyle: {
                        color: "rgba(255, 255, 255, 0.7)",
                    },
                },
                series: [
                    {
                        name: "数值",
                        type: "pie",
                        // radius: '55%',
                        radius: ["60%", "70%"],
                        center: ["39%", "52%"],
                        label: {
                            // textStyle: {
                            color: "rgba(255, 255, 255, 0.9)",
                            // },
                            formatter: (val) => {
                                // console.log(val);
                                return val.value + "座";
                            },
                        },
                        data: [
                            {
                                value: 1,
                                name: "重大",
                                itemStyle: {
                                    borderRadius: 5,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#FF665A",
                                            },
                                            {
                                                offset: 1,
                                                color: "#FF965A",
                                            },
                                        ],
                                    },
                                },
                            },
                            {
                                value: 3,
                                name: "较大",
                                itemStyle: {
                                    borderRadius: 5,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#E19A32",
                                            },
                                            {
                                                offset: 1,
                                                color: "#FEFF0A",
                                            },
                                        ],
                                    },
                                },
                            },
                            {
                                value: 4,
                                name: "一般",
                                itemStyle: {
                                    borderRadius: 5,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#05FAF8",
                                            },
                                            {
                                                offset: 1,
                                                color: "#026CF2",
                                            },
                                        ],
                                    },
                                },
                            },
                            {
                                value: 1,
                                name: "低",
                                itemStyle: {
                                    borderRadius: 5,
                                    color: {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#2ABE90",
                                            },
                                            {
                                                offset: 1,
                                                color: "#05FAF8",
                                            },
                                        ],
                                    },
                                },
                            },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.rootBox {
    width: 100%;
    height: 100%;
    position: relative;
    .echarts {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 11;
    }
    .decorate {
        width: 246px;
        height: 246px;
        // border: 1px solid red;
        // background: url("../../../../../asset/image/group/circle-out.png");
        background-size: cover;
        position: absolute;
        top: 15px;
        left: 30px;
    }
}
</style>
